<template>
  <van-popup :value="showPopup" @input="$emit('update:showPopup', $event)" position="right"
             :style="{ height: '100%',width: '400px',minWidth: '350px',overflow: 'hidden' }">
    <!--        <car-order-search></car-order-search>-->

    <div class="search_content">
      <div class="task_header">
        <div class="top_title">
          <div class="top_title_back" @click="handleGoBack">
            <i class="iconfont icon-back"></i>
          </div>
          <div class="top_title_val">{{ componentTitles[currentComponent] }}</div>
        </div>
      </div>
    </div>
    <div style="height: calc(100% - 50px - 2px);overflow-y: auto">
      <component
        :is="currentComponent"
        :params="currentParams"
        @navigate="handleNavigate"
        @go-back="handleGoBack"
      />
    </div>


  </van-popup>
</template>
<script>

import CarOrderSearch from './index.vue'
import CarOrderList from './list.vue'
import CarInfoDetail from './detail.vue'

export default {
  name: 'searchPopup',
  components: {
    CarOrderSearch,
    CarOrderList,
    CarInfoDetail
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    showPopup(val) {
      if (val) {
        // 弹窗打开时初始化
        this.currentComponent = 'CarOrderSearch'
        this.currentParams = {}
        this.componentStack = []
      }
    }
  },
  data() {
    return {
      componentStack: [], // 栈记录历史组件
      currentComponent: 'CarOrderSearch',
      currentParams: null,
      componentTitles: {
        CarOrderSearch: '车辆搜索',
        CarOrderList: '车辆列表',
        CarInfoDetail: '车辆详情'
      }
    }
  },
  methods: {
    handleNavigate({ component, params }) {
      // 推入历史
      this.componentStack.push({
        component: this.currentComponent,
        params: this.currentParams
      })
      this.currentComponent = component
      this.currentParams = params || null
    },
    handleGoBack() {
      const last = this.componentStack.pop()
      if (last) {
        this.currentComponent = last.component
        this.currentParams = last.params
      } else {
        this.$emit('update:showPopup', false)
      }
    }
  }
}
</script>


<style lang="less" scoped="">
.search_content {
  //position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}


.task_header {
  // background: url('~@/assets/images/title_bg.png') no-repeat center;
  // height: 2.6rem;
  //height: 1.6rem;
  background: url('~@/assets/images/taskbg.png') no-repeat center;
  font-size: 0.24rem;
  background-size: 100% 100%;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }

    .onlyPerson {
      position: absolute;
      right: 10px;
      color: #fff;
      top: 13px;
      clear: both;

      .onlyPerson_txt {
        font-size: 12px;
        color: #fff;
        margin-bottom: 5px;
      }

      .onlyPerson_switch {
        float: right;
      }
    }
  }

  .task_header_data {
    position: relative;

    .top_arrow {
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #3975c6;
      opacity: 0.4;
    }

    .top_left {
      position: absolute;
      top: 22px;
      left: 10px;
      z-index: 3;
    }

    .top_right {
      position: absolute;
      top: 22px;
      right: 10px;
      z-index: 3;
    }

    .task_header_date {
      display: flex;
      align-items: center;
      width: 80%;
      margin: auto;
      margin-bottom: 10px;

      .task_header_date_w {
        width: 30px;
      }

      .task_header_date_item {
        width: calc((100% - 30px) / 5);
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
    }

    .task_header_followData {
      display: flex;
      align-items: center;
      color: #fff;
      width: 80%;
      margin: auto;
      margin-bottom: 10px;

      .task_header_followData_tt {
        width: 30px;
        text-align: center;
      }

      .task_header_followData_item {
        width: calc((100% - 30px) / 5);
        text-align: center;
        font-size: 12px;
        font-weight: bold;

        &.active {
          position: relative;

          &::after {
            content: '';
            width: 30px;
            height: 2px;
            position: absolute;
            bottom: -7px;
            left: 50%;
            margin-left: -15px;
            background: #fff;
          }

          // border-bottom: 1px solid #fff;
        }
      }
    }
  }
}
</style>
